<template>
  <section class="page-com research-result-page" id="page" ref="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
  <div class="pc-page">
    <div class="bannerBox">
      <img src="./assets/images/banner-2.png" class="banner">
      <img class="banner-word" src="./assets/images/slogen.png" alt="" srcset="">
    </div>
    <img src="../../assets/images/student/upTop.png" class="upTop" @click="upTop" id="upTop">
    <div class="content-box">
      <div class="ranking-content" v-if="(weekRankingList && weekRankingList.length > 0) || (monthRankingList && monthRankingList.length > 0)">
        <div class="ranking-list-content">
          <div class="ranking-items left" v-if="weekRankingList && weekRankingList.length > 0">
            <img src="./assets/images/week-ranking.png" class="top" alt="">
            <div class="list-box">
              <Items v-for="(item, i) in weekRankingList" :key="i"  @click.native="handleView(item.newsId)" :i="i" :item="item" :isHideLine="i === weekRankingList.length - 1" />
            </div>
          </div>
          <div class="ranking-items right" v-if="monthRankingList && monthRankingList.length > 0">
            <img src="./assets/images/month-ranking.png" class="top" alt="">
            <div class="list-box">
              <Items v-for="(item, i) in monthRankingList" :key="i"  @click.native="handleView(item.newsId)" :i="i" :item="item" :isHideLine="i === monthRankingList.length - 1" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-pannel">
        <el-tabs class="tabs-group" v-model="activeName" @tab-click="handleClickTabs">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane :label="item.name" :name="i.toString()" v-for="(item, i) in typeList" :key="i"></el-tab-pane>
          <el-tab-pane label="数据可视化平台" name="iframe"></el-tab-pane>
        </el-tabs>
        <iframe v-if="activeName === 'iframe'" class="iframe-box" ref="myIframe" :src="iframeUrl" frameborder="0"></iframe>
        <div v-if="activeName !== 'iframe'">
            <div class="bottom-list-content" v-if="pannelList && pannelList.length">
            <ListItems v-for="(item, i) in pannelList" :key="i"
                :item="item"
                @click.native="handleView(item.id)" />
            </div>
            <el-empty description="无数据" v-else></el-empty>
            <div class="view-more" v-if="total > 6" @click="handleViewMore">
            查看更多
            </div>
        </div>
      </div>
    </div>

  </div>
  <MobliePage />
    <div class="mainFooter" id="pageFooter">
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import Vue from 'vue'
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css';
import Items from './components/Items.vue';
import ListItems from './components/list-item.vue';
import { formatTime } from '@/utils/utils';
import { geStudentNewsStudyInfoPage, getStudentNewsStudyRanking, getStudentNewsStudyType } from '@/request/api';
import MobliePage from './mobile/index.vue';
Vue.use(vueMiniPlayer)
const TYPE = 2;
export default {
  // 组件名称
  name: "researchResult",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, Items, ListItems, MobliePage },
  // 组件状态值
  data() {
    return {
      swiper: null,
      studentList: [],
      activeIndex: 0,
      total: 0,
      pannelList: [],
      monthRankingList: [],
      weekRankingList: [],
      activeName: 'all',
      typeList: [],
      iframeUrl: 'https://sfi.xray.host/dashboard/f/allinone'
    };
  },
  created() {
    this.init();
    this.getStudentNewsStudyType();
    // this.getList();
  },
  // 组件方法
  methods: {
    tabsScroll() {
      this.timer = setInterval(() => {
        if (Number(this.activeName) < this.typeList.length - 1) {
          this.activeName = (Number(this.activeName) + 1).toString();
        } else {
          this.activeName = '0';
        }
        this.typeId = this.typeList[this.activeName].id;
        this.page = 1;
        this.getList();
      }, 3000);
    },
    async init(){
      this.monthRankingList = await this.getRankingList(2);
      this.weekRankingList = await this.getRankingList(1);
    },
    async getList() {
      const { code, data } = await geStudentNewsStudyInfoPage({
        pageNo: 1,
        pageSize: 6, // 首页显示最多6条
        type: TYPE,
        typeId: this.typeId
      });
      if (code !== 0) {
        this.pannelList = [];
      }
      this.total = data.total;
      this.pannelList = data.list.map(v => {
        return {
          ...v,
          releaseTime: formatTime(new Date(v.releaseTime))
        }
      });;
    },
    async getRankingList(type) {
      const { code, data } = await getStudentNewsStudyRanking({ type });
      if (code !== 0) {
        return [];
      }
      return data.map(v => {
        return {
          ...v,
          createTime: formatTime(new Date(v.createTime))
        }
      });
    },
    async getStudentNewsStudyType() {
      const { code, data } = await getStudentNewsStudyType({
        type: TYPE
      });
      if (code !== 0) {
        this.list = [];
        return;
      }
      this.typeList = data;
      this.typeId = '';
      this.getList();
      // this.tabsScroll();
    },
    upTop(){
      window.scrollTo(0, 0)
    },
    handleClickTabs() {
      if (this.activeName === 'all') {
        this.typeId = '';
      } else if (this.activeName === 'iframe') {
        return 
      }  else {
        this.typeId = this.typeList[this.activeName].id;
      }
      this.page = 1;
      this.getList();
    },
    handleViewMore() {
      this.$router.push('/resultList');
    },
    handleView(id) {
      const routerUrl = this.$router.resolve({
        path: '/searchResultDetail/search',
        query: { id },
      });
      window.open(routerUrl.href, '_blank')
    },
  },
  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer); //关闭
    }
  }
};
</script>
<style lang='less' scope>
  .tabs-group {

    .el-tabs__item {
      margin-right: 20px;
      border-radius: 30px;
      font-size: 16px;
      color: #9597A0;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2), .el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px !important;
    }
    .el-tabs__item.is-bottom:last-child, .el-tabs__item.is-top:last-child, .el-tabs__item.is-bottom:last-child, .el-tabs__item.is-top:last-child {
      padding-right: 20px !important;
    }
    .el-tabs__item.is-active {
      background: #3D6CB0;
      color: white;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }
  }

  @media screen and (max-width: 750px) {
    #app {
      min-width: auto;
    }
    .research-result-page {
      padding-top: 0.54rem !important;
    }
    .pc-page {
      display: none;
    }
    .mobile-research-result-page {
      display: block !important;
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page-com {
  position: relative;
  width: 100%;
  background: rgb(237,242,249);
  padding-top: 80px;
  .upTop{
    width: 46px;
    position: fixed;
    bottom: 107px;
    right: calc((100% - 1200px) / 2 - 78px);
    cursor: pointer;
    transition-duration: .3s;
  }
  .bannerBox{
    width: 100%;
    position: relative;
    height: 190px;
    overflow-x: hidden;
    .banner{
      width: 100%;
      // -o-object-fit: contain;
      // object-fit: contain;
      height: 100%;
      display: block;
      min-width: 1920px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }

    .banner-word {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 9;
      width: 456px;
    }

  }

  .content-box {
    min-height: calc(100vh - 570px);
  }
}
.ranking-content {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 20px;
  background: white;

  .ranking-list-content {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    .ranking-items {
      width: 564px;
      border-radius: 8px;
      min-height: 200px;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: 0px 5px 20px 0px rgba(212,214,218,0.63);
      border-radius: 12px;
      border: 1px solid #D4D6DA;
      padding-bottom: 20px;

      position: relative;
      overflow-y: auto;

      .list-box {
        max-height: 415px;
        overflow: auto;
      }

      .top {
        width: 100%;
        height: 85px;
      }
    }
    .left {
      margin-right: 15px;
    }

    .right {
      margin-left: 15px;
    }
  }
}
.bottom-pannel {
  width: 1200px;
  overflow-x: hidden;
  margin: 20px auto 0;
  text-align: center;

  .bottom-list-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 67px 0 0;
  }

  .view-more {
    display: inline-block;
    background: #E1EFFE;
    color: #3D6CB0;
    margin: 0 auto 55px;
    cursor: pointer;
    width: 208px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
}
.iframe-box {
    width: 100%;
    height: 100vh;
    min-height: 800px
}
</style>
